<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar title="发布" />
    <div class="publish">
      <!-- 标题 -->
      <van-form validate-first>
        <van-field
          style="margin-top: 10px"
          v-model="title"
          name="title"
          placeholder="请输入标题"
        />

        <van-field
          readonly
          clickable
          :value="cate_name"
          placeholder="请选择标题"
          @click="showPicker = true"
        />

        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            value-key="name"
            @cancel="showPicker = false"
          />
        </van-popup>

        <!-- 内容 -->
        <van-field type="textarea" v-model="content" placeholder="请输入内容" />

        <van-field name="uploader" style="margin-top: 10px">
          <template #input>
            <!--                        是否开启图片多选 最大上传个数-->
            <van-uploader v-model="fileList" multiple :max-count="3" />
          </template>
        </van-field>

        <van-button
          type="primary"
          size="large"
          round
          block
          :square="true"
          native-type="submit"
          @click="publishBtn"
        >
          确定</van-button
        >
      </van-form>
    </div>
  </div>
</template>
<script>
import { getCateList } from "@/api/home.js";
import { addArticle } from "@/api/api";
import { mapState, mapActions } from "vuex";
export default {
  name: "publish",
  components: {},
  data() {
    return {
      cate_id: "",
      cate_name: "",
      content: "",
      fileList: [],
      title: "",
      showPicker: false,
      columns: [],
    };
  },
  created() {
    this.getCate();
  },
  computed: {
    ...mapState(["uid", "userInfo"]),
  },
  methods: {
    ...mapActions(["upload"]),

    getCate() {
      getCateList().then((res) => {
        console.log(res);
        this.columns = res.data;
      });
    },

    async publishBtn(e) {
      let { title, content, fileList, uid, userInfo, cate_name, cate_id } =
        this;

      if (!uid) {
        this.$toast("你还没有登录，请你登录后重试");
        return;
      }

      console.log(title, content, fileList, uid, userInfo, cate_name, cate_id);

      // console.log(fileList[0].file);
      // let file=fileList[0].file
      // let { type } = file;

      let imageSrc = await this.upload(fileList); //上传的文件逻辑  单独封装
      // console.log(imageSrc)
      // return;
      addArticle({
        title,
        content,
        cate_name,
        cate_id,
        author_id: uid,
        imageSrc,
        author: userInfo.nickname,
      }).then((res) => {
        console.log(res);

        if (res.code == 0) {
          this.$toast("发布成功");
          //  也可以做一个立即查看功能
        } else {
          this.$toast(res.msg);
        }
      });
      
      setTimeout((v) => {
        this.$router.push('/');
      }, 800);
    },

    onConfirm({ name, _id }) {
      this.cate_name = name;
      this.cate_id = _id;
      this.showPicker = false;
    },
  },
};
</script>

<style lang="less">
</style>